<template>
	<view>
		<view class="mean_top" v-if="switchManage">
			<view class="guanli" @click="switchMan">
				<image style="width: 32rpx;height: 32rpx;margin: 0 10rpx;"
					src="https://daiyue.gzzhenyi.net/static/image/user/编辑@4x.png" mode="a"></image>
				<text>管理</text>
			</view>
			<view class="addAdress" @click="toAdd">
				<van-icon style="margin: 0 10rpx;" color="#359BEF" name="plus" />
				<text>新增地址</text>
			</view>
		</view>
		<view class="mean_top" v-else>
			<view class="addAdress" @click="switchMan">
				<image style="width: 36rpx;height: 32rpx; margin-right: 10rpx; "
					src="https://daiyue.gzzhenyi.net/static/image/user/tuichu@4x.png" mode="aspectFit"></image>
				<text style="color: #FF6200;">退出管理</text>
			</view>
		</view>
		<view class="addAdress_list">
			<view class="list_item" v-for="(item, i) in addressList " :key="i" @click="addressClick(item)">
				<view class=" item_topmsg">
				<view class="item_left">
					<view class="item_left_top">
						<image style="width: 26rpx;height: 30rpx;margin: 8rpx 10rpx 0 0;"
							src="https://daiyue.gzzhenyi.net/static/image/user/dizhi@4x.png" mode="aspectFit">
						</image>
						<view class="title">
							<text>{{ item.address }}</text>
							<van-tag style="margin-left: 10rpx;" v-if="item.default" text-color="#FF6200"
								color="#F6F6F6">默认</van-tag>
							<!-- <text class="span">默认</text> -->
						</view>
					</view>

					<view class="user_msg">
						<view class="author">
							<image style="width: 26rpx;height: 30rpx;"
								src="https://daiyue.gzzhenyi.net/static/image/user/renwu@4x.png" mode="aspectFit">
							</image>
							<text>{{ item.name }}</text>
						</view>
						<view class="phone">
							<image style="width: 26rpx;height: 30rpx;"
								src="https://daiyue.gzzhenyi.net/static/image/user/phone@4x.png" mode="aspectFit">
							</image>
							<text>{{ item.mobile }}</text>
						</view>
					</view>
				</view>
				<image style="width: 32rpx;height: 32rpx;" @click="clickEdit(item)"
					src="https://daiyue.gzzhenyi.net/static/image/user/bianji2@1x.png" mode="aspectFit"></image>
			</view>
			<view class="meanfoot" v-if="!switchManage">
				<van-checkbox checked-color="#FF6200" icon-size="15px" style="font-size: 30rpx;" :value="item.default"
					@change="onChange(event, i, item)">默认</van-checkbox>
				<view class="btn_list">
					<button class="delete" @click="showPopup(item.id)">删除</button>
					<button class="copy" @click="tocopy(item)">复制</button>

				</view>
			</view>

		</view>
	</view>
	<van-popup round :show="show" @close="onClose">
		<view class="center">
			<text>确定要删除该地址吗？</text>
			<view class="btn">
				<view class="btn_left" @click="onClose">
					取消
				</view>
				<view class="btn_right" @click="delectOn">
					确定
				</view>
			</view>
		</view>
	</van-popup>
	</view>
</template>

<script>
import { getAddressList, delAddress, addAddress } from '@/api/api.js'
export default {
	data() {
		return {
			show: false,
			switchManage: true,
			index: 0,
			// 模拟数据
			addressList: [
			],
			id: '',
			type: 0
		};
	},
	onLoad(options) {
		this.type = options.type || 0
		this.getList()
	},
	methods: {
		addressClick(item) {
			if (this.type == 1) {
				let pages = getCurrentPages()
				// 2. 上一页面实例
				// 注意是length长度，所以要想得到上一页面的实例需要 -2
				// 若要返回上上页面的实例就 -3，以此类推
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.getValue(item)

				// 4. 返回上一页面
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})
			}

		},
		getList() {
			getAddressList({}).then(res => {
				if (res.code == 1) {
					res.data.data.forEach(item => {
						item.default = item.default == 1 ? true : false
					});
					this.addressList = res.data.data
				}

			})
		},
		toAdd() {
			uni.navigateTo({
				url: "/pages/location/addLocation"
			})
		},
		clickEdit(item) {
			// item.address = '广东省-广州市-荔湾区/测试'
			uni.navigateTo({
				url: "/pages/location/addLocation?item=" + JSON.stringify(item)
			})
		},
		showPopup(id) {
			this.show = true
			this.id = id
		},

		onClose() {
			this.show = false
		},

		delectOn() {
			delAddress({ id: this.id }).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.getList()
					this.show = false
				}
			})
		},
		tocopy(item) {
			let msgObj = `收货人：${item.name} \n联系电话：${item.mobile} \n收货地址：${item.address}`
			uni.setClipboardData({
				data: msgObj,
				success: function () {
					console.log("复制成功")
					uni.showToast({
						title: "复制成功",
						icon: 'none'
					})
				}
			});
		},
		switchMan() {
			this.switchManage = !this.switchManage
		},

		onChange(event, i, item) {
			this.addressList.forEach((e, a) => {
				// console.log(a,i)
				if (a == i) {
					this.addressList[a].default = true
				} else {
					this.addressList[a].default = false
				}
			})
			console.log(item)
			let data = {
				id: item.id,
				default: 1,
				type: 'edit',
				province: item.province,
				city: item.city,
				district: item.district,
				mobile: item.mobile,
				name: item.name,
				address: item.address,

			}
			addAddress(data).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})

		},
	}
}
</script>


<style lang="scss">
page {
	background-color: #fff !important;
}

.center {
	padding: 84rpx 56rpx 38rpx 56rpx;
	border-radius: 24rpx;

	text {
		display: inline-block;
		width: 600rpx;
		text-align: center;
		font-size: 34rpx;
		color: #333333;
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 50rpx;

		.btn_left {
			width: 264rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #FF6200;
			border: 2rpx solid #FF6200;
			margin-right: 20rpx;
			border-radius: 12rpx;
		}

		.btn_right {
			width: 264rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #fff;
			background-color: #FF6200;
			border: 2rpx solid #FF6200;
			border-radius: 12rpx;
		}
	}
}

.mean_top {
	display: flex;
	align-items: center;
	color: #359BEF;
	font-size: 30rpx;
	text-align: right;
	padding: 40rpx 30rpx;
	position: relative;

	.guanli {
		display: flex;
		align-items: center;
		position: absolute;
		right: 220rpx;
	}

	.addAdress {
		display: flex;
		align-items: center;
		position: absolute;
		right: 30rpx;
	}
}

.addAdress_list {
	.list_item {
		padding: 30rpx;
		border-bottom: 2rpx solid #F0F0F0;

		.item_topmsg {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item_left {
				.user_msg {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					font-size: 30rpx;
					color: #333333;

					.author {
						display: flex;
						align-items: center;
						margin-right: 50rpx;

						image {
							margin-right: 12rpx;
						}
					}

					.phone {
						display: flex;
						align-items: center;

						image {
							margin-right: 12rpx;
						}
					}
				}

				.item_left_top {
					display: flex;

					color: #333333;

					.title {
						width: 534rpx;
						font-size: 30rpx;
					}

				}

			}
		}

		.meanfoot {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.btn_list {
				display: flex;
				align-items: center;

				.delete {
					margin-right: 20rpx;
				}
			}

			button {
				border: 2rpx solid #a2a2a2;
				width: 100rpx;
				height: 50rpx;
				font-size: 28rpx;
				color: #333333;
				padding: 0;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;

				&::before {
					border: none;

				}
			}
		}
	}
}
</style>